<script setup>
import { useOrderStore, useUserStore } from '@/stores/index'
import { baseURL } from '@/utils/request'
import { ref } from 'vue'
const myGameList = ref([])
const User = ref({})
const orderStore = useOrderStore()
const userStore = useUserStore()
const getOrderList = async (id) => {
  await orderStore.getOrderListByUserId(id)
  myGameList.value = orderStore.order
  console.log(myGameList.value)
}
User.value = userStore.user

getOrderList(User.value.id)
</script>
<template>
  <div class="done-publish">
    <h3>游戏仓库</h3>
    <el-scrollbar height="600px" v-if="myGameList.length > 0">
      <ul>
        <li v-for="item in myGameList" :key="item.id">
          <el-card class="card" shadow="hover">
            <template #footer>
              <div class="left">
                <div class="title">{{ item.goodname }}</div>
                <div class="price">￥{{ item.goodprice }}</div>
              </div>
              <div class="right">
                <a :href="item.link"
                  ><div>
                    <el-button class="animated bounceIn text" color="#027efb" :dark="isDark" plain
                      >下载</el-button
                    >
                  </div></a
                >
              </div>
            </template>
            <img :src="baseURL + '/files/' + item.image" style="width: 100%" />
          </el-card>
        </li>
      </ul>
    </el-scrollbar>
    <template v-else>
      <el-empty description="您还没有游戏" />
    </template>
  </div>
</template>

<style scoped lang="scss">
h3 {
  color: #027efb;
}
.done-publish {
  height: -webkit-fill-available;
  ul {
    width: 100%;
    padding-right: 18px;
    display: flex;

    flex-wrap: wrap;

    li:nth-child(4n + 1) {
      margin-left: 0;
    }
    li:nth-child(4n) {
      margin-right: 0;
    }
    li {
      margin: auto 7.5px;
    }

    .card {
      width: 180px;
      border: rgb(255, 255, 255) 1px solid;

      img {
        border-radius: 10px;
      }
    }

    .card:hover {
      border: rgb(64, 158, 255) 1px solid;
      .bounceIn {
        animation-duration: calc(1s * 0.75);
        animation-name: bounceIn;
      }
    }

    .left {
      width: 50%;
      .title {
        margin-bottom: 5px;
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }

      .price {
        font-size: 18px;
        font-weight: 600;
        color: #ff4d4f;
      }
    }

    .right {
      text-align: right;

      .text {
        font-size: 16px;
        font-weight: 500;
      }

      .animated {
        animation-duration: 1s;
        animation-fill-mode: both;
        opacity: 0;
      }

      @keyframes bounceIn {
        from,
        20%,
        40%,
        60%,
        80%,
        to {
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        0% {
          opacity: 0;
          transform: scale3d(0.3, 0.3, 0.3);
        }

        20% {
          transform: scale3d(1.1, 1.1, 1.1);
        }

        40% {
          transform: scale3d(0.9, 0.9, 0.9);
        }

        60% {
          opacity: 1;
          transform: scale3d(1.03, 1.03, 1.03);
        }

        80% {
          transform: scale3d(0.97, 0.97, 0.97);
        }

        to {
          opacity: 1;
          transform: scale3d(1, 1, 1);
        }
      }
    }
  }
}
</style>
